class Selection {
    constructor(window) {
        this.window = window;
        this.document = window.document;
        this.ranges = this.getRanges();
    }

    getRanges() {
        let selection;
        let ranges = [];

        if (this.document.selection) {
            selection = this.document.selection;
            ranges = [selection.createRange()];
        } else {
            selection = this.window.getSelection();

            for (let i = 0; i < selection.rangeCount; i++) {
                ranges.push(selection.getRangeAt(i));
            }
        }

        return ranges;
    }

    setRanges(ranges) {
        let selection;

        if (this.document.selection) {
            selection = this.document.selection;
            ranges = ranges || this.ranges;

            let target = ranges[0];
            let range = selection.createRange();

            range.setEndPoint('EndToEnd', target);

            if (range.text) {
                range.setEndPoint('StartToStart', target);
            }

            range.select();
        } else {
            selection = this.window.getSelection();

            selection.removeAllRanges();
            ranges = ranges || this.ranges;

            ranges.forEach((range) => {
                selection.addRange(range);
            });
        }
    }

    getRangeText(range) {
        range = range || this.ranges[0];

        if (!range) {
            return '';
        }

        return range.text || range.toString();
    }

    getRangeNode(range) {
        range = range || this.ranges[0];

        if (!range) {
            return null;
        }

        let node = range.parentElement ?
            range.parentElement() :
            range.commonAncestorContainer;

        if (node.nodeType === 1) {
            return node;
        } else {
            return node.parentNode;
        }
    }

    isRangeEmpty(range) {
        range = range || this.ranges[0];

        if (!range) {
            return false;
        }

        if (range.text) {
            return false;
        }

        if (range.startContainer) {
            if (range.startContainer === range.endContainer &&
                range.startOffset === range.endOffset) {
                return true;
            }
        }

        return false;
    }
    // 保存当前的选区
    save() {
        this.ranges = this.getRanges();
    }
    // 恢复之前保存的选区
    restore() {
        this.setRanges(this.ranges);
    }
}


class Editor {
    constructor(selector) {
        this.editor = document.querySelector(selector);

        this.window = this.editor.contentWindow;
        this.document = this.editor.contentDocument;
        this.document.designMode = 'on';
        this.selectedRange = this.saveSelection();
        this.insertStyle();
    }
    insertStyle() {
        let head = this.document.querySelector('head');
        let style = this.document.createElement('style');

        // 对内容的一些基本样式设置
        style.innerHTML = `
                * {
                    margin: 0;
                    padding: 0;
                }
                ul, ol {
                    margin-left: 20px;
                }
                .readOnly{
                    -webkit-user-modify: read-only !important;
                    display: block;
                }
                .insertNode{
                    // display: none;
                }
                .goods{
                    display: flex;
                    padding: 10px;
                    border: 1px solid gray;
                    border-radius: 5px;
                    -webkit-user-modify: read-only !important;
                }
                .goods:focus{
                    background: red;
                }
                .cover{
                        width: 60px;
                        height: 60px;
                    }
                    .title{
                        font-family: 500;
                        font-size: 16px;
                    }
                    .sub-title{
                        font-size: 14px;
                        color: darkgray;
                
                    }
            `;

        head.appendChild(style);
    }
    execCommand(cmd, args) {
        // 执行命令，其中第二个参数是是否启用浏览器默认UI
        // 由于是我们自己实现的UI，因此这里是false，表示进入默认UI
        this.document.execCommand(cmd, false, args);
    }
    getSelection() {
        return new Selection(this.window);
    }
    saveSelection() { // 保存当前Range对象
        let selection = window.getSelection();
        if (selection.rangeCount > 0) {
            return sel.getRangeAt(0);
        }
        return null;
    };
    restoreSelection() {
        let selection = window.getSelection();
        if (this.selectedRange) {
            selection.removeAllRanges();  // 清空所有 Range 对象
            selection.addRange(this.selectedRange); // 恢复保存的 Range
        }
    }
    initEvent(event, callback) {
        this.window.addEventListener(event, function (e) {
            console.log("element clicked", e.target)
            e.target.focus()
            console.log("selection", this.window.getSelection())
            this.editor.restoreSelection()
        })
    }
}


export default Editor